<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="../base.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="goodsdetails.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 导航栏1 -->
        <div class="nav1">
            <ul>
                <li>您好，欢迎您使用禾田裕农资资约购平台</li>
                <li>
                    <a href="../loginPage.html">
                        <i class="fa fa-home"></i>
                        请登录
                    </a>
                </li>
                <li>
                    <a href="../myagriCulturalresources/myagriCulturalresources.html">
                        <i class="fa fa-star-half-o"></i>
                        我的农资
                    </a>
                </li>
                <li>
                    <a href="../shoppingcart/shoppingcart.html">
                        <i class="fa fa-cart-plus"></i>
                        购物车
                    </a>
                </li>
                <li>
                    <a href="../favorites/favorites.html">
                        <i class="fa fa-folder-o"></i>
                        收藏夹
                    </a>
                </li>
            </ul>
        </div>

        <!-- logo宣传+搜索框 -->
        <div class="logoSearch">
            <div class="logo">
                <img src="logo1.jpeg" alt="" width="265px" height="128px">
                <img src="logo2.png" alt="">
            </div>
            <span class="search">
                <input type="text" placeholder="请输入想搜索的种子、化肥、农资药" class="searchInput">
                <!-- <input type="button" value="搜索"> -->
                <button>搜索</button>
            </span>
        </div>

        <!-- 分类导航栏2 -->
        <div class="nav2">
            <ul>
                <li><a href="../goodsclassifyPage/goodsclassify.html">农资分类</a></li>
                <li><a href="#">活动专区</a></li>
                <li><a href="#">因地制宜</a></li>
                <li><a href="#">农资业科普</a></li>
                <li><a href="#">售后服务</a></li>
            </ul>
        </div>

        <!--左分类栏 + 广告轮播 + 快速入口-->
        <div class="serverce">
            <div class="nav3">
                <ul>
                    <li><a href="#"><i class="fa fa-caret-right"></i>种子</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>化肥</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>农药</a></li>
                    <li><a href="#"><i class="fa fa-caret-right"></i>农具</a></li>
                </ul>
            </div>
            <div class="rollwhell">
                <img src="#" alt="">
            </div>
            <div class="quickEnter">
                <a href="#"><img src="pic1.jpg" alt="" width="215px" height="160px"></a>
                <a href="#"><img src="pic2.jpg" alt="" width="215px" height="160px"></a>
            </div>
        </div>
    </div>




    <!-- 主要内容 -->
    <div class="content">
        <!-- 当前页面位置 -->
        <div class="pageLocation">
            <span><i class="fa fa-map-marker fa-lg"></i></span>&nbsp;&nbsp;
            <span>您现在的位置&nbsp;>&nbsp;农资分类&nbsp;>&nbsp;种子&nbsp;>&nbsp;蔬菜&nbsp;>&nbsp;番茄</span>
        </div>

        <!-- 商品详情展示选择部分 -->
        <div class="good_details">
            <div class="good_pic">
                <div class="big_pic">
                    <img src="pic3.jpg" alt="" width="228px" height="292px">
                </div>
                <div class="samll_pic">
                    <span><img src="pic3.jpg" alt="" width="62px" height="80px"></span>
                    <span><img src="pic4.jpg" alt="" width="62px" height="80px"></span>
                </div>
            </div>
            <div class="good_select">
                <h1>鼎优粉士朵亮型西红柿顶级品种F1代抗TY番茄种子西红柿种子</h1>
                <div class="good_details1">
                    <span class="ele1">价格：<span class="ele2">￥150.00/袋</span></span>
                    <span class="ele1">品牌：&nbsp;鼎优</span>
                </div>
                <div class="good_details1">
                    <span class="ele1">规格：<span>1000粒每袋</span></span>
                    <span class="ele1">库存：&nbsp;526</span>
                </div>
                <div class="good_details2">
                    商品属性选择&nbsp;：
                    <span>
                        <input type="button" value="一袋————1000粒">
                        <input type="button" value="五袋————5000粒">
                        <input type="button" value="十袋————10000粒">
                    </span>
                </div>
                <div class="good_details3">
                    购买数量&nbsp;：&nbsp;&nbsp;
                    <input type="text" value="">
                </div>
                <div class="good_buttons">
                    <input type="button" value="加入购物车">
                    <input type="button" value="加入收藏夹">
                    <input type="button" value="立即购买">
                </div>
            </div>
        </div>

        <!-- 相关推荐 + 商品详情-->
        <div class="details">

            <div class="relatedGoods">
                <div class="relatedGoods_word">
                    <a href="">相关推荐</a>
                </div>
                <div class="relatedGoods_good">
                    <a href=""><img src="pic6.jpg" alt="" width="240px" height="292px"></a>
                </div>
            </div>

            <div class="goodDetails">
                <div class="goodDetails_word">
                    <a href="">商品详情</a>
                </div>
                <div class="goodDetails_show">
                    <div><img src="pic9.jpg" alt="" width="513px" height="464px"></div>
                    <div><img src="pic10.jpg" alt="" width="513px" height="464px"></div>
                    <div><img src="pic11.jpg" alt="" width="513px" height="464px"></div>
                </div>
            </div>

        </div>
    </div>



    <!-- 页面底部 -->
    <div class="footer">
        <div class="foot_nav1">
            <ul>
                <li><i class="fa fa-handshake-o fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;正品质量保证</li>
                <li><i class="fa fa-truck fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;按时配送货物</li>
                <li><i class="fa fa-shield fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;安全支付保障</li>
                <li><i class="fa fa-headphones fa-2x"></i>&nbsp;&nbsp;&nbsp;&nbsp;售后服务守护</li>
            </ul>
        </div>
        <div class="foot_nav2">
            <div class="logo1">
                <img src="logo1.jpeg" alt="" width="200px" height="180px">
            </div>
            <div class="a_navs">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">招商合作</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
                <ul>
                    <li><a href="#">信息查询</a></li>
                    <li><a href="#">农资查询</a></li>
                    <li><a href="#">病害咨询</a></li>
                </ul>
                <ul>
                    <li><a href="#">售后服务</a></li>
                    <li><a href="#">订单中心</a></li>
                    <li><a href="#">订单查询</a></li>
                    <li><a href="#">退换货政策</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手帮助</a></li>
                    <li><a href="#">新用户注册</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_pic">
            <img src="pic8.jpg" alt="" width="1024px" height="132px">
        </div>
    </div> 


</body>

</html>